// 响应式断点定义
$breakpoints: (
  'xs': 480px,   // 手机竖屏
  'sm': 768px,   // 平板竖屏
  'md': 1024px,  // 平板横屏/小屏电脑
  'lg': 1200px,  // 桌面
  'xl': 1440px   // 大屏桌面
);

// 媒体查询混入
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}";
  }
}

// 购物车响应式样式
.cart-page {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    // 移动端调整
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 10px;
      
      .actions {
        width: 100%;
        display: flex;
        gap: 10px;
        
        .el-button {
          flex: 1;
        }
      }
    }
  }
  
  .product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .thumb {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      object-fit: cover;
      
      // 移动端缩小图片
      @media (max-width: 768px) {
        width: 60px;
        height: 60px;
      }
    }
    
    .meta {
      flex: 1;
      
      .title {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        margin-bottom: 4px;
        
        // 移动端文字调整
        @media (max-width: 768px) {
          font-size: 13px;
          line-height: 1.3;
        }
      }
      
      .sku {
        font-size: 12px;
        color: #999;
        
        @media (max-width: 768px) {
          font-size: 11px;
        }
      }
    }
  }
  
  // 表格响应式
  .el-table {
    @media (max-width: 768px) {
      // 隐藏部分列
      .el-table__column--selection {
        width: 40px;
      }
      
      // 调整字体大小
      .cell {
        font-size: 13px;
        padding: 8px;
      }
    }
  }
  
  // 分页响应式
  .el-pagination {
    @media (max-width: 768px) {
      .el-pagination__sizes,
      .el-pagination__jump {
        display: none;
      }
    }
  }
}

// 订单页面响应式
.order-page {
  .order-card {
    margin-bottom: 16px;
    
    @media (max-width: 768px) {
      margin-bottom: 12px;
      
      .el-card__header {
        padding: 12px;
      }
      
      .el-card__body {
        padding: 12px;
      }
    }
  }
  
  .order-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    
    @media (max-width: 768px) {
      flex-direction: column;
      gap: 6px;
      
      .el-button {
        width: 100%;
      }
    }
  }
}

// 通用响应式工具类
.mobile-hidden {
  @media (max-width: 768px) {
    display: none !important;
  }
}

.desktop-hidden {
  @media (min-width: 769px) {
    display: none !important;
  }
}

.responsive-text {
  font-size: 16px;
  
  @include respond-to('sm') {
    font-size: 14px;
  }
  
  @include respond-to('xs') {
    font-size: 13px;
  }
}
